$(function(){
  var layer = layui.layer
  // 获取图片
  var img = $('#image')
  // 配置选项
  const options ={
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
  }
  img.cropper(options)
  // 点击上传
  $('#btnChooseImage').on('click', function() {
    $('#file').click()
  })
  // 绑定事件，改变图片
  $('#file').on('change',function(e){
    console.log(e.target.files);
    const files = e.target.files
    if(files.length === 0){
    return  layer.msg('选择图片')
    }
    const file = e.target.files[0]
    var imgURL = URL.createObjectURL(file)
    img
    .cropper('destroy') 
    .attr('src', imgURL) 
    .cropper(options) 
  })
  // 上传
  $('#upload').on('click',function(){
    //创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 `base64` 格式的字符串
  var dataURL = img
  .cropper('getCroppedCanvas', {
    // 创建一个 Canvas 画布
    width: 100,
    height: 100
  })
  .toDataURL('image/png')
  // 发送ajax
  $.ajax({
    method: 'POST',
    url: '/my/update/avatar',
    data: {
      avatar: dataURL
    },
    success: function(res) {
      if (res.status !== 0) {
        return layer.msg('更换头像失败！')
      }
      layer.msg('更换头像成功！')
      window.parent.getUserInfo()
    }
  })
  })
})